<template>
  <div  class="aftOrder-wrapper">
     <div class="header-top">
        <div @click="leftBtn" class="arrow-left">
            <img src="../../images/jiantou.png" alt="">
        </div>
      </div>
    <div class="orders-bd" v-if="refundList.length">
      <div class="order-card" v-for="(order,index) in refundList" :key="index">
        <div class="order-title">
          <span class="order-code">售后单号：{{order.refundOrderCode}}</span>
          <span class="order-status">{{returnOrder(order.refundStatus)}}</span>
        </div>
        <div @click="$router.push('/aftSerDetail?code='+order.id)">
          <card v-if="order.refundOrderType =='RMB_ORDINARY'" :imgSrc.sync="order.ordinaryOrderDTO.productImageUrl" :name="order.ordinaryOrderDTO.productTitle"  :key="i">
            <div class="good-desc">
              <span class="good-desc-info">{{order.ordinaryOrderDTO.modelName}}</span>
              <span class="good-desc-info">{{order.ordinaryOrderDTO.modelSize}}</span>
            </div>
            <!-- <div v-if="order.refundOrder" class="good-refund" >
              售后状态：{{returnRefundOrder(order.refundStatus)}}
            </div> -->
            <div class="good-price">
              <span class="price-icon">￥</span>
              <span class="good-price-num">{{order.ordinaryOrderDTO.price}}</span>
            </div>
            <div class="good-count">
              x{{order.ordinaryOrderDTO.count}}
            </div>
          </card>
          <div v-if="order.refundOrderType !='RMB_ORDINARY'&&order.productOrderDTO" >
            <card :imgSrc.sync="good.modelImageUrl" :name="good.productTitle" v-for="(good,i) in order.productOrderDTO.orderItems" :key="i">
              <div class="good-desc">
                <span class="good-desc-info">{{good.modelName}}</span>
                <span class="good-desc-info">{{good.modelSize}}</span>
              </div>
              <!-- <div v-if="order.refundOrder" class="good-refund" >
                售后状态：{{returnRefundOrder(order.refundStatus)}}
              </div> -->
              <div class="good-price">
                <span class="price-icon">￥</span>
                <span class="good-price-num">{{good.modelSalePrice}}</span>
              </div>
              <div class="good-count">
                x{{good.count}}
              </div>
            </card>
          </div>

        </div>
        
        <div class="order-info">
          <span class="goods-count">共{{order.refundOrderType !='RMB_ORDINARY'?order.productOrderDTO.orderItems.length:order.ordinaryOrderDTO.count}}件商品</span>
          <span class="order-price">实付款：<span class="order-money">￥{{order.refundOrderType !='RMB_ORDINARY'?order.productOrderDTO.totalPrice:order.ordinaryOrderDTO.price}}</span></span>
        </div>
        <div class="order-options">
          <div class="order-option" v-if="order.refundStatus=='WAIT_AUDIT'">
            <div class="handle-btn" @click="handleDelOrder(order.id)">取消</div>
          </div>
          <div class="order-option" v-else-if="order.status=='已取消'">
            <div class="handle-btn">删除</div>
          </div>
          <div class="order-option" v-if="order.refundStatus=='IN_PROCESS'&&order.refundType == 'REFUND_GOODS'">
            <div class="handle-btn" @click="checkLog(order)">查看物流</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="text-align: center;font-size: .3rem;margin-top: 1rem;">
      暂无订单
    </div>
    <div v-transfer-dom>
      <confirm v-model="delDialog"
        :hide-on-blur="true"
        confirm-text="取消"
        cancel-text="确认"
        @on-cancel="confirmDel"
        @on-confirm="delDialog = false">
        <p class='dialog-content'>确认取消售后?</p>
      </confirm>
    </div>
  </div>  
</template>

<script>
	import CONSTANT from "../../../wechat/static/constant/urlconstant";
	import common from "../../../wechat/static/common/common";
import Card from "@/components/common/Goods-card.vue";
const testimg1 = require("../../images/test.png");
import {Confirm,TransferDomDirective as TransferDom } from 'vux';
export default {
  directives: {
    TransferDom
  },
  data() {
    return {
      cancelDialog:false,
      delDialog:false,
      curIndex: 0,
      orderList: [],
      detail: {
          orderItems: []
      },
        auditStatusList: [{
	        label: "待审核",
	        value: "WAIT_AUDIT"
        },{
	        label: "处理中",
	        value: "IN_PROCESS"
        },{
	        label: "售后成功",
	        value: "SUCCESS"
        },{
	        label: "售后失败",
	        value: "FAILURE"
        },{
	        label: "默认状态",
	        value: "NORMAL"
        },{
	        label: "取消售后",
	        value: "CANCEL"
        }],
        pageIndex: 1,
        pageSize: 10,
        refundList: [],
        orderCode: ""
    };
  },
  components: {
    Card,
    Confirm,
  },
    mounted() {
  	   this.getList()
    },
  methods:{
    leftBtn(){
      this.$router.back(-1)
    },
    checkLog(obj){
      this.$router.push({
          path:'/logisticsDetail',
          query:{
              logisticsCompany:obj.logisticsCompany,
              logistics:obj.shipmentNumber
          }
      })
    },
    returnOrder(val){
      let str;
      this.auditStatusList.map((item)=>{
        if(item.value.indexOf(val) != -1){
          str = item.label
        }
      })
      return str
    },
      getList() {
        this.$vux.loading.show({
              text: "加载中"
          });
	      let url = CONSTANT.REFUND.LIST
	      common.post(url, {pageSize: this.pageSize, pageIndex: this.pageIndex}, (res) => {
          this.$vux.loading.hide();
          if (res.code == 200) {
			      this.refundList = res.data.bussData
		      }
	      })
      },
    linkTo(link){
      this.$router.push(link);
     },
     changeHd(index) {
      this.curIndex = index;
      if (index == 1) {
	      this.getList()
      }else{
        this.getDetail()
      }
    },
	  handleDelOrder(orderCode){
    	this.orderCode = orderCode
		  this.delDialog = true;
	  },
	  confirmDel() {
	  	let url = CONSTANT.MY.refundCancel
          common.get(url, this.orderCode, (res) => {
          	if (res.code ==200) {
          		this.$vux.toast.show({
                    type: "success",
                    text: "取消成功"
                })
                this.getList()
            }
          })
      },
    showCancelDialog(code){
      this.orderCode = code
      this.delDialog=true;
    },

  }
};
</script>

<style lang="less">
.aftOrder-wrapper {
  .header-top{
    height: .8rem;
      line-height: .8rem;
      background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
    .arrow-left{
      position: absolute;
      left: .1rem;
      top: .1rem;
      height: .9rem;
      width: 1rem;
      z-index: 99;
      img{
        height: .5rem;
        width: .5rem;
      }
    }
  }
  .no-data {
        text-align: center;
        font-size: 0.28rem;
        font-family: PingFang-SC-Bold;
        color: rgba(153, 153, 153, 1);
        margin-top: 40%;
    }
  .orders-bd{
      .order-card{
        background: white;
        padding-left:.25rem;
        padding-right:.25rem;
        box-sizing: border-box;
        margin-bottom:.2rem;
      .order-title{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height:.88rem;
        align-items: center;
        font-family:PingFang-SC-Medium;
        font-size: .28rem;
        .order-code{
          color:#333333;
        }
        .order-status{
          color:#FF7268;
        }
      }
      .card{
        box-sizing: border-box;
        border-bottom:.01rem solid rgba(238,238,238,.6);
        border-top:.01rem solid rgba(238,238,238,.6);
        .goods-item-content{
          box-sizing: border-box;
          height:2.3rem;
          padding-top:0rem;
        .good-desc{
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
          max-height: .9rem;
          .good-desc-info{
            font-size:.26rem;
            font-family:PingFang-SC-Light; 
            color:rgba(158,158,158,1);
            line-height:.5rem;
            margin-right:.2rem;
            }
          }
          .good-price{
            position: absolute;
            bottom:0.1rem;
            color:#FF7268;
            .good-price-num{
              font-size:.31rem;
              font-family:PingFang-SC-Light;
              line-height:.52rem;
            }
          }
          .good-count{
            position:absolute;
            bottom:0.1rem;
            right:0;
            color:#666666;
            font-size: .26rem;
            font-family:PingFang-SC-Medium;
          }
        }
        .good-refund {
          text-align: right;
          color: #fd2024;
          font-size: .28rem;
          font-weight: bold;
          margin-right: -0.23rem;
        }
      }
      .order-info{
        height:.9rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom:.01rem solid rgba(238,238,238,.6);
        .goods-count{
          font-size: .3rem;
          color:#333333;
          font-family:PingFang-SC-Medium;
        }
        .order-price{
          font-size: .3rem;
          color:#666666;
          font-family:PingFang-SC-Medium;
          .order-money{
            color:#FF7268;
            font-size: .32rem;
          }
        }
      }
      .order-option{
        width:100%;
        height:.9rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        .remind-btn{
          margin-right:.2rem;
          width:1.56rem;
          height:.5rem;
          color:#999999;
          border-radius: .04rem;
          text-align: center;
          line-height: .5rem;
          border:.02rem solid rgba(153,153,153,1);
          font-size:.26rem;
        }
        .handle-btn{
          margin-left:.2rem;
          font-size:.26rem;
          width:1.56rem;
          height:.5rem;
          color:#FF7268;
          border-radius: .04rem;
          text-align: center;
          line-height: .5rem;
          border:.02rem solid #fd2024;
        }
      }
    }
  }
  .goods-content {
    .good-img {
      width: 2.32rem;
      height: 2.33rem;
      background-size: 100%;
    }
  }
  .goods-item-content {
    position: relative;
    z-index: 2;
    background: white;
    height: 2.32rem;
    padding: 0.21rem 0.23rem 0.2rem 0.21rem;
    overflow: hidden;
    text-overflow: ellipsis;
    .item-desc {
      .item-desc-info {
        font-size: 0.26rem;
        font-family: PingFang-SC-Light;
        color: rgba(158, 158, 158, 1);
        line-height: 0.5rem;
        margin-right: 0.2rem;
      }
    }
    .item-price {
      position: absolute;
      bottom: 0.15rem;
      color: #FF7268;
      .item-price-num {
        font-size: 0.31rem;
        font-family: PingFang-SC-Light;
        line-height: 0.52rem;
      }
    }
  }
}
</style>
